<template>
  <div class="home-container">
    <div class="welcome-section">
      <h1>欢迎回来，{{ currentUser?.userName || '用户' }}！</h1>
      <p>这里是您的个人仪表板，今天是 {{ todayDate }}，祝您工作愉快！</p>
      <div class="weather-info">
        <el-icon><Sunny /></el-icon>
        <span>{{ weather.city }} {{ weather.temperature }}°C {{ weather.description }}</span>
      </div>
    </div>

    <div class="dashboard-grid">
      <!-- 数据概览卡片 -->
      <el-card class="data-overview-card">
        <template #header>
          <div class="card-header">
            <span>数据概览</span>
            <el-button type="text" size="small" @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </template>
        <div class="overview-grid">
          <div class="overview-item">
            <div class="overview-icon user-icon">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ systemStats.totalUsers }}</div>
              <div class="overview-label">总用户数</div>
              <div class="overview-trend">
                <el-icon class="trend-up"><CaretTop /></el-icon>
                <span>+{{ systemStats.newUsersToday }}</span>
              </div>
            </div>
          </div>
          
          <div class="overview-item">
            <div class="overview-icon order-icon">
              <el-icon><ShoppingBag /></el-icon>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ systemStats.totalOrders }}</div>
              <div class="overview-label">总订单数</div>
              <div class="overview-trend">
                <el-icon class="trend-up"><CaretTop /></el-icon>
                <span>+{{ systemStats.ordersToday }}</span>
              </div>
            </div>
          </div>

          <div class="overview-item">
            <div class="overview-icon revenue-icon">
              <el-icon><Money /></el-icon>
            </div>
            <div class="overview-content">
              <div class="overview-number">¥{{ formatNumber(systemStats.totalRevenue) }}</div>
              <div class="overview-label">总收入</div>
              <div class="overview-trend">
                <el-icon class="trend-up"><CaretTop /></el-icon>
                <span>+{{ systemStats.revenueGrowth }}%</span>
              </div>
            </div>
          </div>

          <div class="overview-item">
            <div class="overview-icon product-icon">
              <el-icon><Box /></el-icon>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ systemStats.totalProducts }}</div>
              <div class="overview-label">商品总数</div>
              <div class="overview-trend">
                <el-icon class="trend-up"><CaretTop /></el-icon>
                <span>+{{ systemStats.newProducts }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 快速操作卡片 -->
      <el-card class="action-card">
        <template #header>
          <div class="card-header">
            <span>快速操作</span>
          </div>
        </template>
        <div class="action-buttons">
          <el-button type="primary" @click="editProfile">
            <el-icon><User /></el-icon>
            编辑资料
          </el-button>
          <el-button type="success" @click="changePassword">
            <el-icon><Lock /></el-icon>
            修改密码
          </el-button>
          <el-button type="warning" @click="viewSettings">
            <el-icon><Setting /></el-icon>
            系统设置
          </el-button>
          <el-button type="info" @click="viewProfile">
            <el-icon><Document /></el-icon>
            查看资料
          </el-button>
          <el-button v-if="isAdmin" type="danger" @click="goToAdmin">
            <el-icon><Tools /></el-icon>
            管理后台
          </el-button>
          <el-button type="primary" plain @click="viewMessages">
            <el-icon><ChatDotRound /></el-icon>
            消息中心
            <el-badge :value="unreadCount" class="message-badge" />
          </el-button>
        </div>
      </el-card>

      <!-- 用户信息卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
            <el-button type="primary" size="small" @click="editProfile">
              编辑
            </el-button>
          </div>
        </template>
        <div class="user-details">
          <div class="detail-item">
            <span class="label">用户名：</span>
            <span class="value">{{ currentUser?.userAccount }}</span>
          </div>
          <div class="detail-item">
            <span class="label">昵称：</span>
            <span class="value">{{ currentUser?.userName || '未设置' }}</span>
          </div>
          <div class="detail-item">
            <span class="label">角色：</span>
            <span class="value">{{ getRoleText(currentUser?.userRole) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">创建时间：</span>
            <span class="value">{{ formatDate(currentUser?.createTime) }}</span>
          </div>
          <div class="detail-item">
            <span class="label">上次登录：</span>
            <span class="value">{{ lastLoginTime }}</span>
          </div>
          <div class="detail-item">
            <span class="label">登录次数：</span>
            <span class="value">{{ personalStats.loginCount }} 次</span>
          </div>
        </div>
      </el-card>

      <!-- 最近活动卡片 -->
      <el-card class="activity-card">
        <template #header>
          <div class="card-header">
            <span>最近活动</span>
            <el-button type="text" size="small" @click="viewAllActivities">
              查看全部
            </el-button>
          </div>
        </template>
        <div class="activity-list">
          <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
            <div class="activity-icon" :class="activity.type">
              <el-icon v-if="activity.type === 'login'"><Key /></el-icon>
              <el-icon v-else-if="activity.type === 'order'"><ShoppingCart /></el-icon>
              <el-icon v-else-if="activity.type === 'profile'"><User /></el-icon>
              <el-icon v-else><Bell /></el-icon>
            </div>
            <div class="activity-content">
              <div class="activity-title">{{ activity.title }}</div>
              <div class="activity-time">{{ formatRelativeTime(activity.time) }}</div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 任务列表卡片 -->
      <el-card class="task-card">
        <template #header>
          <div class="card-header">
            <span>待办任务</span>
            <el-button type="text" size="small" @click="addTask">
              <el-icon><Plus /></el-icon>
              添加
            </el-button>
          </div>
        </template>
        <div class="task-list">
          <div v-for="task in todoTasks" :key="task.id" class="task-item">
            <el-checkbox 
              v-model="task.completed" 
              @change="toggleTask(task)"
              :class="{ 'completed': task.completed }"
            >
              {{ task.title }}
            </el-checkbox>
            <div class="task-priority" :class="task.priority">
              {{ getPriorityText(task.priority) }}
            </div>
          </div>
        </div>
      </el-card>

      <!-- 系统公告卡片 -->
      <el-card class="notice-card">
        <template #header>
          <div class="card-header">
            <span>系统公告</span>
            <el-button type="text" size="small" @click="viewAllNotices">
              查看全部
            </el-button>
          </div>
        </template>
        <div class="notice-list">
          <div v-for="notice in systemNotices" :key="notice.id" class="notice-item" @click="viewNotice(notice)">
            <div class="notice-title">{{ notice.title }}</div>
            <div class="notice-time">{{ formatDate(notice.publishTime) }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="passwordDialogVisible"
      title="修改密码"
      width="400px"
      @close="resetPasswordForm"
    >
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="100px"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            show-password
            placeholder="请输入原密码"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
            placeholder="请确认新密码"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitPasswordChange" :loading="passwordLoading">
            确认修改
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  User, Lock, Setting, UserFilled, ShoppingBag, Money, Box, 
  Refresh, Document, Tools, ChatDotRound, Sunny, Key, 
  ShoppingCart, Bell, Plus, CaretTop
} from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const passwordDialogVisible = ref(false)
const passwordLoading = ref(false)
const passwordFormRef = ref<FormInstance>()

// 密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码验证规则
const validateConfirmPassword = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const passwordRules: FormRules = {
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

// 计算属性
const currentUser = computed(() => userStore.currentUser)
const isAdmin = computed(() => currentUser.value?.userRole === 'admin')
const todayDate = computed(() => new Date().toLocaleDateString('zh-CN'))
const lastLoginTime = computed(() => {
  const date = new Date()
  date.setHours(date.getHours() - 2)
  return date.toLocaleString('zh-CN')
})

// 系统统计数据
const systemStats = reactive({
  totalUsers: 12580,
  newUsersToday: 45,
  totalOrders: 8956,
  ordersToday: 128,
  totalRevenue: 2580000,
  revenueGrowth: 15.6,
  totalProducts: 1245,
  newProducts: 8
})

// 个人统计数据
const personalStats = reactive({
  loginCount: 156,
  lastLogin: new Date().toISOString(),
  profileCompleteness: 85,
  tasksCompleted: 24
})

// 天气信息
const weather = reactive({
  city: '北京',
  temperature: 22,
  description: '晴'
})

// 消息未读数量
const unreadCount = ref(5)

// 最近活动数据
const recentActivities = reactive([
  {
    id: 1,
    type: 'login',
    title: '登录系统',
    time: new Date(Date.now() - 1000 * 60 * 30).toISOString()
  },
  {
    id: 2,
    type: 'order',
    title: '创建了新订单 #12345',
    time: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString()
  },
  {
    id: 3,
    type: 'profile',
    title: '更新了个人资料',
    time: new Date(Date.now() - 1000 * 60 * 60 * 6).toISOString()
  },
  {
    id: 4,
    type: 'system',
    title: '系统消息：账户安全提醒',
    time: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString()
  }
])

// 待办任务数据
const todoTasks = reactive([
  {
    id: 1,
    title: '完善个人资料信息',
    completed: false,
    priority: 'high'
  },
  {
    id: 2,
    title: '查看系统更新日志',
    completed: true,
    priority: 'medium'
  },
  {
    id: 3,
    title: '备份重要数据',
    completed: false,
    priority: 'high'
  },
  {
    id: 4,
    title: '参与用户反馈调研',
    completed: false,
    priority: 'low'
  }
])

// 系统公告数据
const systemNotices = reactive([
  {
    id: 1,
    title: '系统维护通知：本周六凌晨2-4点',
    publishTime: new Date(Date.now() - 1000 * 60 * 60 * 12).toISOString(),
    content: '为了提供更好的服务质量...'
  },
  {
    id: 2,
    title: '新功能上线：智能推荐系统',
    publishTime: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
    content: '我们很高兴地宣布...'
  },
  {
    id: 3,
    title: '安全提醒：定期更换密码',
    publishTime: new Date(Date.now() - 1000 * 60 * 60 * 48).toISOString(),
    content: '为了保护您的账户安全...'
  }
])

// 方法
const getRoleText = (role?: string) => {
  const roleMap: Record<string, string> = {
    'admin': '管理员',
    'user': '普通用户'
  }
  return roleMap[role || ''] || '未知'
}

const formatDate = (date?: string) => {
  if (!date) return '未知'
  return new Date(date).toLocaleDateString('zh-CN')
}

const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toLocaleString()
}

const formatRelativeTime = (dateString: string) => {
  const now = new Date()
  const date = new Date(dateString)
  const diffMs = now.getTime() - date.getTime()
  const diffMins = Math.floor(diffMs / (1000 * 60))
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))

  if (diffMins < 1) return '刚刚'
  if (diffMins < 60) return `${diffMins}分钟前`
  if (diffHours < 24) return `${diffHours}小时前`
  if (diffDays < 7) return `${diffDays}天前`
  return formatDate(dateString)
}

const getPriorityText = (priority: string) => {
  const priorityMap: Record<string, string> = {
    'high': '高',
    'medium': '中',
    'low': '低'
  }
  return priorityMap[priority] || '中'
}

const handleCommand = (command: string) => {
  switch (command) {
    case 'profile':
      editProfile()
      break
    case 'settings':
      viewSettings()
      break
    case 'logout':
      logout()
      break
  }
}

const editProfile = () => {
  router.push('/profile/edit')
}

const viewProfile = () => {
  router.push('/profile')
}

const changePassword = () => {
  passwordDialogVisible.value = true
}

const viewSettings = () => {
  ElMessage.info('系统设置功能开发中...')
}

const goToAdmin = () => {
  if (isAdmin.value) {
    router.push('/admin/dashboard')
  } else {
    ElMessage.warning('您没有管理员权限')
  }
}

const viewMessages = () => {
  ElMessage.info('消息中心功能开发中...')
  // 实际项目中可以跳转到消息页面
  // router.push('/messages')
}

const refreshData = async () => {
  ElMessage.success('数据已刷新')
  // 这里可以重新获取最新的统计数据
  systemStats.newUsersToday = Math.floor(Math.random() * 100) + 20
  systemStats.ordersToday = Math.floor(Math.random() * 200) + 50
}

const viewAllActivities = () => {
  ElMessage.info('查看全部活动功能开发中...')
  // router.push('/activities')
}

const viewAllNotices = () => {
  ElMessage.info('查看全部公告功能开发中...')
  // router.push('/notices')
}

const viewNotice = (notice: any) => {
  ElMessageBox.alert(notice.content, notice.title, {
    confirmButtonText: '确定',
    type: 'info'
  })
}

const addTask = async () => {
  try {
    const { value: taskTitle } = await ElMessageBox.prompt('请输入任务内容：', '添加任务', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPlaceholder: '任务内容'
    })
    
    if (taskTitle) {
      const newTask = {
        id: todoTasks.length + 1,
        title: taskTitle,
        completed: false,
        priority: 'medium'
      }
      todoTasks.push(newTask)
      ElMessage.success('任务添加成功')
    }
  } catch {
    // 用户取消
  }
}

const toggleTask = (task: any) => {
  if (task.completed) {
    ElMessage.success(`任务"${task.title}"已完成`)
  }
}

const logout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await userStore.logout()
    router.push('/login')
  } catch {
    // 用户取消
  }
}

const submitPasswordChange = async () => {
  if (!passwordFormRef.value) return
  
  try {
    await passwordFormRef.value.validate()
    passwordLoading.value = true
    
    // 这里应该调用修改密码的API
    ElMessage.success('密码修改成功')
    passwordDialogVisible.value = false
    resetPasswordForm()
  } catch (error) {
    console.error('修改密码失败:', error)
  } finally {
    passwordLoading.value = false
  }
}

const resetPasswordForm = () => {
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
  passwordFormRef.value?.clearValidate()
}

// 生命周期
onMounted(async () => {
  // 获取当前用户信息
  await userStore.getCurrentUser()
})
</script>

<style scoped>
.home-container {
  width: 100%;
  background: transparent;
}

.welcome-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 40px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  color: #1f2937;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.welcome-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.welcome-section h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.welcome-section p {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #6b7280;
  position: relative;
  z-index: 1;
}

.weather-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #9ca3af;
  position: relative;
  z-index: 1;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.info-card,
.action-card,
.stats-card,
.data-overview-card,
.activity-card,
.task-card,
.notice-card {
  height: fit-content;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-card:hover,
.action-card:hover,
.stats-card:hover,
.data-overview-card:hover,
.activity-card:hover,
.task-card:hover,
.notice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

/* 数据概览卡片样式 */
.data-overview-card {
  grid-column: span 2;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.overview-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.overview-item:hover {
  background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
  border-color: #409eff;
}

.overview-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.user-icon {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.order-icon {
  background: linear-gradient(135deg, #2196F3 0%, #1976d2 100%);
}

.revenue-icon {
  background: linear-gradient(135deg, #FF9800 0%, #f57c00 100%);
}

.product-icon {
  background: linear-gradient(135deg, #9C27B0 0%, #7b1fa2 100%);
}

.overview-content {
  flex: 1;
}

.overview-number {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.overview-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
}

.overview-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #4CAF50;
  font-weight: 500;
}

.trend-up {
  color: #4CAF50;
}

/* 用户信息卡片样式 */
.user-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.detail-item:hover {
  background-color: #f8f9fa;
  margin: 0 -16px;
  padding: 10px 16px;
  border-radius: 6px;
}

.detail-item:last-child {
  border-bottom: none;
}

.label {
  font-weight: 500;
  color: #666;
}

.value {
  color: #333;
  font-weight: 500;
}

/* 快速操作卡片样式 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-buttons .el-button {
  justify-content: flex-start;
  padding: 14px 16px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-buttons .el-button:hover {
  transform: translateX(4px);
}

.message-badge {
  margin-left: 8px;
}

/* 最近活动卡片样式 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.activity-item:hover {
  background-color: #e3f2fd;
  transform: translateX(4px);
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

.activity-icon.login {
  background: #4CAF50;
}

.activity-icon.order {
  background: #2196F3;
}

.activity-icon.profile {
  background: #FF9800;
}

.activity-icon.system {
  background: #9C27B0;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 2px;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

/* 任务列表卡片样式 */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.task-item:hover {
  background-color: #e3f2fd;
}

.task-item .el-checkbox {
  flex: 1;
}

.task-item .el-checkbox.completed {
  opacity: 0.6;
}

.task-priority {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.task-priority.high {
  background-color: #ffebee;
  color: #c62828;
}

.task-priority.medium {
  background-color: #fff3e0;
  color: #ef6c00;
}

.task-priority.low {
  background-color: #e8f5e8;
  color: #2e7d32;
}

/* 系统公告卡片样式 */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notice-item {
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notice-item:hover {
  background-color: #e3f2fd;
  transform: translateX(4px);
}

.notice-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  font-weight: 500;
}

.notice-time {
  font-size: 12px;
  color: #999;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 1200px) {
  .data-overview-card {
    grid-column: span 1;
  }
  
  .overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .overview-grid {
    grid-template-columns: 1fr;
  }
  
  .welcome-section {
    padding: 20px;
  }
  
  .welcome-section h1 {
    font-size: 24px;
  }
  
  .overview-item {
    padding: 16px;
  }
  
  .overview-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}
</style>
